<template>
    <div>
        <el-form ref="releaseForm" :model="release" :rules="rules" style="margin-left: 15px; margin-top: 10px;">
            <el-form-item label="标题:" prop="title">
                <el-input v-model="release.title" size="medium" placeholder="请输入标题" prefix-icon="el-icon-edit" clearable style="width: 35%;" />
            </el-form-item>
            <el-form-item label="发布人:" prop="author">
                <el-input v-model="release.author" size="medium" placeholder="请输入发布人姓名" prefix-icon="el-icon-edit" clearable style="width: 178px;" />
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <editor v-model="release.content" />
                <div class="preview" v-html="release.content" />
            </el-form-item>
        </el-form>
        <p style="display: inline-block; margin-left: 15px; color: #ff85c0;">是否对外公开：</p>
        <el-switch v-model="release.isPublish" active-color="#ff4949" />
        <span style="float: right;">
            <el-button @click="returnIndex">取消</el-button>
            <el-button type="primary" @click="doAddRelease">发布</el-button>
            <el-button @click="resetForm('releaseForm')">重置</el-button>
        </span>
    </div>
</template>

<script>
export default {
    name: 'AnnouncementRelease',
    data() {
        return {
            release: {
                title: '',
                author: '',
                content: '',
                isPublish: false
            },
            rules: {
                title: [
                    {required: true, message: '请输入标题', trigger: 'blur'}
                ],
                author: [
                    {required: true, message: '请输入发布人姓名', trigger: 'blur'}
                ],
                content: [
                    {required: true, message: '请填写内容', trigger: 'blur'}
                ]
            }
        }
    },
    created() {
    },
    methods: {
        returnIndex() { // 取消返回页面
            this.$router.push({path: '/announcement/index'})
        },
        doAddRelease() { // 确认发布公告
            this.$refs['releaseForm'].validate(valid => {
                if (valid) {
                    this.postRequest('/notice/add', this.release).then(resp => {
                        if (resp) {
                            this.$router.push({path: '/announcement/index'})
                        }
                    })
                }
            })
        },
        resetForm(releaseForm) { // 重置添加框内容
            this.$refs[releaseForm].resetFields()
        }
    }
}
</script>

<style lang="scss" scoped>
.preview {
    margin-top: 10px;
    &::before {
        content: '预览：';
        display: block;
    }
}
</style>
